<template>
	<view class="city-list-wrap full flex column box relative bg-primary" :style="{'--top-value':topHeight}">
		<view class="search-box w-100" id="topWrap">
			<u-search :showAction="true" @search="searchCity" @focus="onFocus" v-model="keyword" placeholder="城市/拼音"
				actionText="取消" @custom="cancelHandle" @change="searchChange" />
		</view>
		<view class="top-wrap w-100">
			<view class="current-city">
				<text>当前:{{ currentName }}</text>
			</view>
			<view class="early-open">
				<text>定位/最近访问</text>
				<view class="flex" style="gap: 24rpx;">
					<view v-for="(item,index) in recentlyData" :key="index" class="city-tag" @click="chooseCity(item)">
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-1 box relative">
			<view class="absolute inset" id="indexListConn">
				<trigger-indexList :list="indexLists" :height="contentHeight">
					<template #default="{indexList}">
						<index-item v-for="(item,index) in indexList" :item="item" :key="index">
							<template #lineHead>
								<view class="line-header">
									<text>{{item.name}}</text>
								</view>
							</template>
							<template #lineBody>
								<view class="line-body-wrap">
									<view class="lineBody" v-for="(child,childIndx) in item.data" :key="childIndx"
										@click="chooseCity(child)">
										<view class="name">
											<text>{{child.name}}</text>
										</view>
									</view>
								</view>
							</template>
						</index-item>
					</template>
				</trigger-indexList>
			</view>
		</view>
		<view class="search-content" v-if="visible">
			<view class="search-mask absolute inset" @click="visible=false"></view>
			<template v-if="searchData.length">
				<view class="search-list absolute inset">
					<scroll-view class="full box" scroll-y>
						<view class="serach-list-item" v-for="(item,index) in searchData" :key="index"
							@click.stop="chooseCity(item)">{{ item.name }}
						</view>
					</scroll-view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import indexItem from '@/uni_modules/trigger-indexList/components/trigger-indexList_item/trigger-indexList_item.vue'
	import { mapGetters } from 'vuex'
	let timerID = null
	export default {
		components: { indexItem },
		data() {
			return {
				contentHeight: uni.getStorageSync('city-content-height') || '500px',
				keyword: '',
				currentName: '',
				cityData: {},
				indexList: [],
				itemArr: [],
				searchData: [],
				visible: false,
				event: '',
				showData: false,
				indexLists: [],
				topHeight: '0px',
			}
		},
		onLoad(ev) {
			uni.showLoading({
				title: '正在加载地址',
				mask: true,
			})
			this.initData()
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)
			if (ev.hasOwnProperty('current')) this.currentName = ev.current
			if (ev.hasOwnProperty('event')) this.event = ev.event
		},
		onReady() {
			this.initRect()
		},
		methods: {
			clearTimeout() {
				clearTimeout(timerID)
				timerID = null
			},
			searchChange(value) {
				if (!value) return this.clearTimeout()
				if (timerID) this.clearTimeout()
				timerID = setTimeout(() => {
					this.searchCity(value)
				}, 300)
				console.log(value, 'change');
			},
			initRect() {
				let selector = uni.createSelectorQuery().in(this)
				selector.select('#indexListConn').boundingClientRect()
				selector.select('#topWrap').boundingClientRect()
				selector.exec(rect => {
					const [target, topWrap] = rect
					this.topHeight = topWrap.height + 'px'
					console.log(this.topHeight, 'topHeight');
					const { height } = target
					const value = height + 'px'
					this.contentHeight = value
					uni.setStorage({
						key: 'city-content-height',
						data: value
					})
					selector = null
				})
			},
			cancelHandle() {
				this.visible = false
				this.keyword = ''
			},
			onFocus() {
				this.visible = true
			},
			async searchCity(search) {
				const resp = await this.$request({
					url: '/index/getCityAll',
					data: { search },
				})
				const { data } = resp
				if (Array.isArray(data)) {
					this.searchData = []
					return this.$toast({ title: '没有搜索到结果' })
				}
				const result = []
				for (const key in data) {
					const target = data[key]
					if (!target || !target.length) return
					result.push(...target.map(item => {
						const { id, name } = item
						return { id, name }
					}))
				}
				this.searchData = result
				console.log(resp, 'resp');
			},
			patchData(data) {
				const result = []
				for (const key in data) {
					const cityData = data[key].map(item => {
						const { id, name } = item
						return { id, name }
					})
					result.push(...cityData)
				}
				this.indexLists = result
			},
			chooseCity(item) {
				const { event } = this
				if (!!event) uni.$emit(event, item)
				uni.navigateBack()
			},
			async initData() {
				const resp = await this.$request({
					url: '/index/getCityAll',
				})
				const { code, data, msg } = resp
				if (code !== 1) return this.$toast({ title: msg }, () => uni.navigateBack())
				// console.log(resp, 'resp')
				this.cityData = data
				this.patchData(data)
			},
		},
		computed: {
			...mapGetters(['recentlyData']),
		},

	}
</script>

<style lang="scss" scoped>
	.line-body-wrap {
		padding: 0 32rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.line-header {
		box-sizing: border-box;
		background-color: #f6f6f6;
		color: #c2c2c2;
		padding: 24rpx 12rpx;
		font-size: 30rpx;
		box-sizing: border-box;
	}

	.index-list-wrap {
		padding: 0 32rpx;
		box-sizing: border-box;
		position: relative;
	}

	.lineBody {
		display: flex;
		align-items: center;
		padding: 32rpx 16rpx;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(164, 164, 164, .2);

		.headImg {
			width: 80rpx;
			height: 80rpx;
			border-radius: 15rpx;
			margin-right: 30rpx;
		}
	}

	.search-content {
		z-index: 999;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: var(--top-value);

		.search-list {
			background: #fff;
			z-index: 2;
			padding: 0 32rpx;
			box-sizing: border-box;

			.serach-list-item {
				padding: 24rpx;
				box-sizing: border-box;
				color: #626262;
				font-size: 30rpx;
				line-height: 1;
				border-bottom: 1px solid #e3e3e3;

			}
		}

		.search-mask {
			background: rgba(0, 0, 0, .5);
		}
	}

	.city-list-wrap {


		.search-box {
			padding: 24rpx 24rpx 16rpx;
			background: #fff;
			box-sizing: border-box;
		}

		.city-list-conn {
			width: 100%;
			padding: 0 24rpx;
			background: #fff;

			.city-item {
				padding: 32rpx 0;
				border-bottom: 1px solid #f3f3f3;
			}
		}

		.city-label {
			padding: 32rpx 24rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #333;
			background-color: #fff;
		}

		.current-city {
			padding: 24rpx;
			font-size: 30rpx;
			color: #333;
			box-sizing: border-box;
			border-bottom: 1px solid #f3f3f3;
		}

		.top-wrap {
			background: #fff;

			.early-open {
				padding: 24rpx 32rpx;
				font-size: 30rpx;
				color: #333;
				display: flex;
				flex-flow: column;
				// margin-top: 24rpx;
				line-height: 1;

				.city-tag {
					padding: 16rpx 24rpx;
					border-radius: 8rpx;
					font-size: 30rpx;
					color: #333;
					width: fit-content;
					border: 1px solid #ececec;
					margin-top: 24rpx;
				}
			}
		}
	}
</style>